<template>
    <div class="kind">
        <head-top></head-top>
        <el-button size="mini" @click="open()" class="kind3">添加分类</el-button>
        <template>
            <el-table :data="tableData" class="table2">
                <el-table-column label="分类编号" width="130">
                    <template slot-scope="scope">
                        <!-- <i class="el-icon-time"></i> -->
                        <span style="margin-left: 10px">{{ scope.row.number }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="分类名称" width="160">
                    <template slot-scope="scope">
                        <!-- <i class="el-icon-time"></i> -->
                        <span style="margin-left: 10px">{{ scope.row.name }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                        <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </template>

        <!-- 添加分类 -->
        <el-dialog title="添加分类信息" v-model="dialogFormVisible2" class="dialogFormVisible2">
            <!-- <el-form :model="selectTable" class="form1"> -->
            <el-input v-model="input" placeholder="请输入分类名称" class="input2"></el-input>
            <!-- </el-form> -->
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible2 = false">取 消</el-button>
                <el-button type="primary" @click="updateShop">确 定</el-button>
            </div>
        </el-dialog>
        <!-- 编辑分类 -->
        <el-dialog title="修改分类信息" v-model="disable" class="disable">
            <!-- <el-form :model="selectTable" class="form1"> -->
            <el-input v-model="input" placeholder="请输入修改后的名称" class="input2"></el-input>
            <!-- </el-form> -->
            <div slot="footer" class="dialog-footer">
                <el-button @click="disable = false">取 消</el-button>
                <el-button type="primary" @click="updateShop1">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
import headTop from '../../components/headTop'

export default {
    data() {
        return {
            dialogFormVisible2: false,
            tableData: [{
                number: '01',
                name: '选择题',
            }, {
                number: '02',
                name: '填空题',
            }, {
                number: '03',
                name: '判断题',
            }, {
                number: '04',
                name: '简答题',
            }, {
                number: '05',
                name: '编程题',
            }, {
                number: '06',
                name: '设计题',
            }],
            input: '',
            disable:false,
        }
    },
    components: {
        headTop,
    },
    methods: {
        handleEdit(index, row) {
            console.log(index, row);
        },
        handleDelete(index, row) {
            console.log(index, row);
        },
        open() {
            this.dialogFormVisible2 = true
        },
        updateShop() {
            this.$message({
                message: '添加分类成功',
                type: 'success',
            });
            this.dialogFormVisible2 = false
        },
        handleDelete() {
            this.$confirm('此操作将永久删除该分类, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.$message({
                    type: 'success',
                    message: '删除成功!'
                });
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },
        handleEdit(){
            this.disable=true
        },
        updateShop1(){
            this.$message({
                message: '修改分类成功',
                type: 'success',
            });
            this.disable = false
        }
    }
}

</script>
<style>
.table2 {
    width: 450px;
    margin: 0 auto 0;
}

.kind3 {
    font-size: 16px;
    display: block;
    margin: 50px 415px 10px;
    /* width: 500px; */
}

.el-dialog {
    width: auto;
    text-align: center;
}

.input2 {
    width: 200px;
    display: block;
}

.el-dialog__footer {
    text-align: center;
}

.el-dialog__body {
    padding: 30px 50px;
}

.cell {
    text-align: center;
}</style>